<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/css/mui.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <style>
        .mui-media-object {
            line-height: 42px;
            max-width: 42px;
            height: 5%;
            margin-bootom: 40px;
        }

    </style>
</head>

<body>
    <header id="header" class="mui-bar mui-bar-nav">
        <button id="headerBacker" class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>首页
        </button>
        <h1 class="mui-title">{{ $categoryTitle }}</h1>
    </header>
    <div class="mui-content">
        <div class="mui-content-padded">
            <ul class="mui-table-view">
                @foreach ($products as $product)
                    <li class="mui-table-view-cell mui-media" v-for="item in items">
                        <a href="/product/info?productId={{ $product['id'] }}">
                            <img class="mui-media-object mui-pull-left" src="{{ $product['cover'] }}">
                            <div class="mui-media-body">
                                <div class="mui-ellipsis-2">{{ $product['name'] }}</div>
                                <div class="mui-ellipsis-2">
                                    <span class="price-first">¥ {{ $product['original_price'] }}</span>
                                </div>
                            </div>
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
        <div class="mui-content-padded footer">
            <p>
                --- 已经到底喽 ---
            </p>
        </div>
    </div>
    <script src="/js/mui.min.js"></script>
    <script type="text/javascript">
        mui.init({
            swipeBack: true,
        });

    </script>
</body>

</html>
